<template>
    <div class="screen_block_box flex-column">
        <h2 class="header">液位变化趋势图</h2>
        <div class="chart" ref="liquid_trend"></div>
    </div>
</template>
<script>
import resize from '@/mixins/resize';
import echarts from 'echarts';
import {remoteWeekJarList} from '@/api/home'

export default {
    name: 'LiquidTrend',
    mixins: [resize],
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initEchart();
        });
    },
    methods: {
        async initEchart() {
            let res = await remoteWeekJarList();
            let {data} = res;
            let legend = [],
                xData = [],
                series = [],
                colors = [];
            
            data.map((item,index)=>{
                let {jarName,dayUseList} = item;
                legend.push(jarName);
                let dayData = []
                dayUseList.map(use=>{
                    if(index==0){
                        xData.push(use.calDate)
                    }
                    dayData.push(use.usedAmountVol) 
                })
                let r = Math.floor(Math.random()*256);
                let g = Math.floor(Math.random()*256);
                let b = Math.floor(Math.random()*256);
                colors.push(`rgba(${r},${g},${b},1)`)
                series.push(
                    {
                        name: jarName,
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color:`rgba(${r},${g},${b},1)`,
                                width: 1
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: `rgba(${r},${g},${b},.3)`,
                                        },
                                        {
                                            offset: 0.8,
                                            color: `rgba(${r},${g},${b},0)`,
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        },
                        data: dayData
                    }
                )
            })
            this.myChart = echarts.init(this.$refs.liquid_trend);

            this.myChart.setOption(
                {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: '#23cdff'
                            }
                        },
                        // formatter: function (params) {
                        //     return params[0].name+'：' + params[0].data;
                        // }
                    },
                    color: colors,
                    legend: {
                        show:false,
                        icon: 'rect',
                        itemWidth: 14,
                        itemHeight: 5,
                        itemGap: 13,
                        data: legend,
                        right: '4%',
                        textStyle: {
                            fontSize: 12,
                            color: '#23cdff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '6%',
                        top:40,
                        bottom: 10,
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLine: {
                                lineStyle: {
                                    color: '#23cdff'
                                }
                            },
                            axisLabel:{
                                interval:0,
                                // rotate:45,
                                textStyle: {
                                    fontSize: 11
                                }
                            },
                            data: xData
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '（L）',
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#23cdff'
                                }
                            },
                            axisLabel: {
                                margin: 5,
                                textStyle: {
                                    fontSize: 11
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    type:'dashed',
                                    color: '#015973'
                                }
                            }
                        }
                    ],
                    series: series
                },
                true
            );
        }
    }
};
</script>
<style lang="scss" scoped>
.chart {
    width: 100%;
    // min-height: 180px;
    height: 100%;
}
</style>